import React, { Component, useContext } from 'react'
const ThemeContext = React.createContext()
const ColorContext = React.createContext()
ThemeContext.displayName = 'ThemeContext'
ColorContext.displayName = 'ColorContext'

const Third = () => {
    const theme = useContext(ThemeContext)
    const color = useContext(ColorContext)
    return (
        <div>
            theme: {theme}
            <hr />
            color: {color}
        </div>
    )
}

class Second extends Component {
    render() {
        return (
            <div>
                <Third />
            </div>
        )
    }
}
class App extends Component {
    state = {
        theme: 'dark',
        color: '#f66'
    }
    render() {
        return (
            <ThemeContext.Provider value = { this.state.theme }>
                <ColorContext.Provider value = { this.state.color }>
                    <div onClick={
                        () => {
                            this.setState({
                                theme: this.state.theme === 'dark' ? 'light' : 'dark'
                            })
                        }
                    }>
                        <button>切换主题</button>
                    </div>
                    <input type="color" value={this.state.color} onChange={(e) => {
                        this.setState({
                            color: e.target.value
                        })
                    }} />
                    <Second theme={this.state.theme} />
                </ColorContext.Provider>
            </ThemeContext.Provider>
        )
    }
}

export default App